var timer;
window.onload=function(){

    //后退功能
    document.getElementsByClassName("back")[0].addEventListener("tap",function(){
        history.back()
    });

    timer = window.setInterval("djs()",1000);

    //加载数据
    loadData();
    //spMove();
}

//倒计时
var time = localStorage.getItem("time");

/**
 * 倒计时
 */
function djs(){
    
    if(!time){
        time = new Date();
        time.setMinutes(time.getMinutes()+20);
        var year = time.getFullYear();
        var month = (time.getMonth() + 1).toString().padStart(2,'0');
        var day = time.getDate().toString().padStart(2,'0');
        var hour = time.getHours().toString().padStart(2,'0');
        var minu = time.getMinutes().toString().padStart(2,'0');
        var sec = time.getSeconds().toString().padStart(2,'0');
        localStorage.setItem("time",year+"-"+month+"-"+day+" "+hour+":"+minu+":"+sec);
    }
    var currentTime = new Date();
    var endTime = Date.parse(time);
    var fen = parseInt((endTime - currentTime)/ 1000 / 60).toString().padStart(2,'0');
    var miao = parseInt((endTime - currentTime)/ 1000 % 60).toString().padStart(2,'0');
    document.getElementsByClassName("djs")[0].innerText = fen + ":" + miao;
    if(endTime - currentTime <= 0){
        document.getElementsByClassName("djs")[0].innerText = '';
        window.clearInterval(timer);
    }
}

//总价变量
var totalPrice = 0;
/**
 * 选中图标点击事件
 */
function tbClickFn(){
    //var tbs = document.getElementsByClassName("tb");
    //var tbs = document.querySelectorAll(".tb");
    //yh = document.getElementsByClassName("yh");
    //yh = document.querySelectorAll(".yh");
    //yj = document.getElementsByClassName("yj");
    //yj = document.querySelectorAll(".yj");
    //nums =document.getElementsByClassName("nums");
    //nums = document.querySelectorAll(".nums");
    console.log(tbs);
    for(let i=0; i<tbs.length; i++){
        var jg = parseFloat(yh[i].innerText) + yj[i].innerText * (nums[i].value-1); 
        tbs[i].addEventListener("tap",function(){
            console.log(i)
            //计算价格
            console.log(yh);
            //var jg = parseFloat(document.querySelectorAll(".yh")[i].innerText) + document.querySelectorAll(".yj")[i].innerText * (document.querySelectorAll(".nums")[i].value-1); 
            if(this.getAttribute("checked")){
                this.style.backgroundPosition="0rem 0rem";
                this.removeAttribute("checked");
                yhjg[i].style.display="none";
                totalPrice -= parseFloat(jg);
                checkedCount--;
            }else{
                this.style.backgroundPosition="-1rem 0rem";
                this.setAttribute("checked","true");
                yhjg[i].style.display="block";
                totalPrice = parseFloat(totalPrice) + parseFloat(jg);
                checkedCount++;
            }
            document.getElementById("zj").innerText = totalPrice;
            document.getElementById("yx").innerText = checkedCount;
        })
    }
}

var yh;
var yj;
var yhjg;
var nums;
var tbs;
/**
 * 渲染数据
 */
function loadData(){
    var fu = document.getElementById("product");
    var data = JSON.parse(localStorage.getItem("gwc"));
    
    var isFirst = true;
    //店铺名
    var dpm = "";
    //商品信息
    var itemData;

    //每一块商品+删除
    var itemObj = document.createElement("div");
    itemObj.className="item";

    //sp商品块
    var hz = document.createElement("div");
    hz.className="dp";

    //增补删除
    var kong = document.createElement("div");
    kong.className="kong";
    //kong.innerText="&nbsp;";

    //遍历数据
    for (var item of data) {
        //添加新店铺
        if(!dpm || item.shop != dpm ){
            //替换新店铺名[后面遍历判断以新店铺名为准]
            dpm = item.shop;
            // console.log(dpm)
            // console.log(isFirst)
            if(!isFirst){
                //将之前的同一个店铺内容显示到页面中
                itemObj.appendChild(hz);
                itemObj.appendChild(kong);
                fu.appendChild(itemObj); 
            }

            itemObj = document.createElement("div");
            itemObj.className="item";

            hz = document.createElement("div");
            hz.className="dp";

            kong = document.createElement("div");
            kong.className="kong";
            //kong.innerText="&nbsp;";

            itemData = `<div class="dpmc">${item.shop}</div>
                <div class="sp">
                    <div>
                        <div class="tb"></div>
                    </div>
                    <div>
                        <div class="pic">
                            <img src="${item.goodsPic}" />
                        </div>
                    </div>
                    <div>
                        <div>spm</div>
                        <div>
                            <div>
                                <p>￥<span class="yj">${item.goodsPrice}</span></p>
                                <p class="yhjg">优惠后￥<span class="yh">${item.goodsPrice-100}</span></p>
                            </div>
                            <div>
                                <p class="mius"></p>
                                <input type="text" size="2" class="nums" value="1">
                                <p class="add"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="del">
                    删除
                </div>`;
            hz.innerHTML = itemData;
            isFirst = false;
        }else{
            //console.log("else ",dpm, item.shop)

            itemData = `<div class="sp">
                <div>
                    <div class="tb"></div>
                </div>
                <div>
                    <div class="pic">
                        <img src="${item.goodsPic}" />
                    </div>
                </div>
                <div>
                    <div>spm</div>
                    <div>
                        <div>
                            <p>￥<span class="yj">${item.goodsPrice}</span></p>
                            <p class="yhjg">优惠后￥<span class="yh">${item.goodsPrice-100}</span></p>
                        </div>
                        <div>
                            <p class="mius"></p>
                            <input type="text" size="2" class="nums" value="1">
                            <p class="add"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="del">
                    删除
            </div>`;
            hz.innerHTML += itemData;
        }
    }
    //将之前的同一个店铺内容显示到页面中
    itemObj.appendChild(hz);
    itemObj.appendChild(kong);
    fu.appendChild(itemObj);
    
    yh = document.querySelectorAll(".yh");
    yj = document.querySelectorAll(".yj");
    yhjg = document.querySelectorAll(".yhjg")
    nums =document.querySelectorAll(".nums");
    tbs = document.querySelectorAll(".tb");

    //动态添加图标点击事件
    tbClickFn();
    //动态添加全选点击事件
    qxClickFn();
    //动态添加+-点击事件
    changeCountFn();
    //商品添加左滑效果
    spMove();
    //删除点击事件
    delFn();
}

var checkedCount = 0;
/**
 * 全选点击事件
 */
function qxClickFn(){
    document.getElementsByClassName("chooseAll")[0].addEventListener("tap",function(){
        checkedCount = 0;
        //每一个商品前的图标
        var tbs = document.getElementsByClassName("tb");
        if(this.getAttribute("checked")){
            this.style.backgroundPosition="0rem 0rem";
            this.removeAttribute("checked");
            
            for(let i=0; i<tbs.length; i++){
                //计算价格
                var jg = parseFloat(document.getElementsByClassName("yh")[i].innerText) + document.getElementsByClassName("yj")[i].innerText * (document.getElementsByClassName("nums")[i].value-1); 
                tbs[i].style.backgroundPosition="0rem 0rem";
                tbs[i].removeAttribute("checked");
                document.getElementsByClassName("yhjg")[i].style.display="none";
                totalPrice = parseFloat(totalPrice) - parseFloat(jg);
                checkedCount--;
            }
        }else{
            this.style.backgroundPosition="-0.7rem 0rem";
            this.setAttribute("checked","true");
          
            for(let i=0; i<tbs.length; i++){
                //计算价格
                var jg = parseFloat(document.getElementsByClassName("yh")[i].innerText) + document.getElementsByClassName("yj")[i].innerText * (document.getElementsByClassName("nums")[i].value-1); 
                tbs[i].style.backgroundPosition="-1rem 0rem";
                tbs[i].setAttribute("checked","true");
                document.getElementsByClassName("yhjg")[i].style.display="block";
                totalPrice = parseFloat(totalPrice) + parseFloat(jg);
                checkedCount++;
            }
        }
        document.getElementById("zj").innerText = totalPrice;
        document.getElementById("yx").innerText = checkedCount;
    })
}

/**
 * + - 改变数量
 */
function changeCountFn(){
    var miusArr = document.getElementsByClassName("mius");
    var addArr = document.getElementsByClassName("add");
    for(let i=0; i<miusArr.length; i++){
        miusArr[i].addEventListener("tap",function(){
            this.nextElementSibling.value = this.nextElementSibling.value - 1;
        });
        addArr[i].addEventListener("tap",function(){
            this.previousElementSibling.value = parseInt(this.previousElementSibling.value) + 1;
        });
    }
}

/**
 * 商品左滑
 */
function spMove(){
    var spArr = document.getElementsByClassName("sp");//spdel
    for(var i=0; i<spArr.length; i++){
        spArr[i].addEventListener("swipeleft",function(){
            this.style.marginLeft="-0.7rem";
            //this.children[1].style.display="block";
            this.nextElementSibling.style.display="block";
            this.parentNode.nextElementSibling.style.display="block";
        })
    }
    for(var i=0; i<spArr.length; i++){
        spArr[i].addEventListener("swiperight",function(){
            this.style.marginLeft="0rem";
            //this.children[1].style.display="none";
            this.nextElementSibling.style.display="none";
            this.parentNode.nextElementSibling.style.display="none";
        })
    }
}

/**
 * 删除点击事件
 */
function delFn(){
    var delArr = document.getElementsByClassName("del");
    for(let i=delArr.length-1; i>=0; i--){
        delArr[i].addEventListener("tap",function(){
            console.log(i)
            this.parentNode.parentNode.remove();
            
        })
    }
    //图标的点击事件
    //tbClickFn();
}